<template>
  <base-page-view ref="pageView" class-name="tab-container">
    <view class="header-container">
      <base-nav title="物流详情" left-icon="back">
        <view slot="left" class="header-left">
          <image src="/static/images/icon/icon_arror_left.png" />
        </view>
        <!-- <view slot="other" class="header-right  relative-container">
          <image src="/static/images/icon/icon_service.png" />
          <b-open-type open-type="contact" :goods="goods" />
        </view> -->
      </base-nav>
    </view>

    <!-- <view v-if="packageTitleList.length > 0" class="pack_title"> -->
    <view v-if="packageTitleList.length >= 1">
      <view v-if="packageTitleList.length > 1" class="pack_title">
        <view v-if="showTip" class="pack-tip">
          <text class="pack-tip-content">温馨提示：您的包裹拆成多个快递分别发出。</text>
          <image src="/static/images/icon/icon__tip_close.png" class="icon-close" @click="showTip = false" />
        </view>
        <view class="pack-tab">
          <view v-for="(item, index) in packageTitleList" :key="index" :class="{'pack-tab-item':true,'ac': active == index}" @click="changeActive(index)">
            <!-- <image v-if="active === index" src="/static/images/order/icon_car_on.png" class="icon-pack" />
            <image v-else src="/static/images/order/icon_car.png" class="icon-pack" /> -->
            <text class="pack-item-name">{{ item }}</text>
          </view>
        </view>
      </view>
      <block v-for="(pitem, pindex) in expressObject" :key="pindex">
        <view v-if="active === pindex" :key="pindex" class="expressDetail">
          <view class="consignee">
            <view class="sLine">
              <view class="lCont addressBox">
                <view class="addressItem">
                  <view class="editRow">物流公司: {{ pitem.name }} </view>
                  <view class="editRow">物流单号: {{ pitem.express_no }}</view>
                  <view v-if="pitem.tel" class="editRow">查询电话: <text href="" class="o-a">{{ pitem.tel }}</text></view>
                </view>
              </view>
              <view class="lCont copyBtn" @click="handleCopy(pitem.express_no, $event)">复制</view>
            </view>
          </view>
          <view v-if="pitem.express_message_list.length > 0" class="expressList">
            <view v-for="(item, index) in pitem.express_message_list" :key="index" :class="{'highLight': index === 0, 'itemLi': true}">
              <text class="o-span"></text>
              <view>{{ item.msg }}</view>
              <view>{{ item.create_time ? _parseTime(item.create_time) : _parseTime(item.createTime) }}</view>
            </view>
          </view>
          <view v-else class="no-express">
            暂无物流信息
          </view>
        </view>
      </block>
    </view>
    <view v-else class="no-express">
      暂无物流信息
    </view>
    <!--猜你喜欢-->
    <view v-if="show" class="like">
      <view class="title">
        <image src="/static/images/icon/icon_like_left.png" />
        <text class="o-span">猜你喜欢</text>
        <image src="/static/images/icon/icon_like_right.png" />
      </view>
      <likeList ref="likeListRef" image-radius="0" @getCommendData="getCommendData" />
    </view>

    <!--拆包提示-->
    <view v-if="showMention" class="mask">
      <b-image src="/static/images/order/package_mention.png" :is-asset="true" class-name="image" @click="showMention = false" />
    </view>

  </base-page-view>
</template>
<script>
import { parseTime, setClipboardData } from '@/utils/tools'
import likeList from '@/components/likeGoodsList/index'
import './index.scss'
export default {
  components: {
    likeList
  },
  data() {
    return {
      goods: {},
      orderNo: '',
      packageNo: '',
      showMention: false,
      girdSet: {
        decorate: false
      },
      mention: {
        type: 'waring',
        title: '温馨提示：您的包裹拆成多个快递分别发出。',
        closeBtn: true
      },
      expressObject: null,
      active: 0,
      packageTitleList: [],

      showTip: true,
      show: true
    }
  },
  onLoad(options) {
    this.orderNo = options.orderNo
    this.goods.orderNo = this.orderNo
    this.packageNo = options.packageNo
    this.getOrderStatus()
  },
  methods: {
    async getOrderStatus() {
      const res = await this.$api.orderApi.getOrderDetail({
        order_no: this.orderNo
      })
      if (res.success) {
        this.expressObject = res.data.express_list
        this.expressObject.forEach((item, index) => {
          this.packageTitleList.push('包裹' + (index + 1))
        })
        if (this.packageNo) {
          this.active = this.packageNo * 1
        }
        this.initMention()
      }
    },
    // 拆包提示
    initMention() {
      if (this.expressObject.length > 1) {
        const res = this.getMentionMaskParam('split_order_mention')
        this.showMention = res
      } else {
        this.showMention = false
      }
    },
    getMentionMaskParam(target) {
      const isFirst = uni.getStorageSync('__mention_params__')
      const arr = {}
      // 是否显示 提示， false为不提示， true为提示
      let result = false

      // 是否有参数组
      if (isFirst) {
        const mention = JSON.parse(isFirst)[target]
        // 判断是否已经提醒过
        if (mention) {
          result = false
        } else {
          result = true
          arr[target] = true
          uni.setStorageSync('__mention_params__', JSON.stringify(arr))
        }
      } else {
        result = true
        arr[target] = true
        uni.setStorageSync('__mention_params__', JSON.stringify(arr))
      }

      return result
    },
    _parseTime(time, format) {
      return parseTime(time, format)
    },
    // 复制
    handleCopy(data, e) {
      setClipboardData({
        data: data
      })
    },
    getCommendData(show) {
      this.show = show
    },
    changeActive(index) {
      this.active = index
    }
  },
  onReachBottom() {
    this.$refs.likeListRef.loadMore()
  },
  onPageScroll(res) {
    this.$refs.pageView.scrollShowBtn(res)
  }
}
</script>
